<template>
    <div>
        <el-container>
        <!-- 左侧菜单区域 -->
        <el-aside width="auto">
            <Common-aside/>
        </el-aside>
        <el-container>
            <!-- 顶部区域 -->
            <el-header>
                <common-header></common-header>
            </el-header>
            <!-- 导航面包屑 -->
            <common-tag></common-tag>
            <!-- 内容区域 -->
            <keep-alive>
                <el-main>
                    <!-- 子路由出口 -->
                    <!-- 子路由匹配到的组件将渲染在这里 -->
                    <router-view :key="$route.fullPath"></router-view>
                </el-main>
            </keep-alive>
        </el-container>
        </el-container>
    </div>
</template>
<script>
import CommonAside from '../components/CommonAside.vue'
import CommonHeader from '../components/CommonHeader.vue'
import CommonTag from '../components/CommonTag.vue'
export default {
    data(){
        return {}
    },
    components:{
        CommonAside,
        CommonHeader,
        CommonTag
    },
    computed: {
        key (){
            return this.$route.path + Math.random();
        }
    },
}
</script>

<style lang="less" scoped>
.el-header {
    padding: 0;
}
.el-menu {
    border-right: none;
}
</style>